<template>
  <div class="box">
    <div class="logo">
      <img src="@/assets/logo.svg" alt="" />
    </div>
    <a-menu
      v-model:selectedKeys="selectedKeys"
      mode="vertical"
      :items="items"
      @click="handleClick"
      class="menu"
    />
    <div class="bottom">
      <a-button style="margin-bottom: 20px" @click="openAction"
        >修改密码</a-button
      >
      <a-button @click="logout">退出登录</a-button>
    </div>
    <ActionOfModal ref="actionOfModal" />
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import type { MenuProps } from "ant-design-vue";
import ActionOfModal from "./actionOfModal/index.vue";
import Cookies from "js-cookie";
import $td from "@/components/td";

let actionOfModal = ref();
const router = useRouter();

const selectedKeys = ref<any>([]);

//拿到当前地址
const path = router.currentRoute.value.path;

const items = ref([
  {
    key: "1",
    label: "示例",
    title: "example",
    url: "/admin/example",
  },
]);
items.value.forEach((item) => {
  if (path === "/") {
    selectedKeys.value = ["0"];
    return;
  }

  if (item.url === path) {
    selectedKeys.value = [item.key];
  }
});

const handleClick: MenuProps["onClick"] = (menuInfo) => {
  router.push(menuInfo.item.url);
};

let openAction = () => {
  actionOfModal.value.open();
};

const logout = () => {
  $td.Modal.confirm({
    title: "退出登录",
    content: "是否确定退出登录",
    onOk: () => {
      $td.request.request({
        url: "/admin/user/logout",
        method: "post",
      });

      $td.message.success("退出登录成功");
      $td.removeToken();
      Cookies.remove("td-username");
      Cookies.remove("td-password");
      Cookies.remove("td-rememberMe");
      router.push("/admin/login");
    },
  });
};
</script>

<style scoped lang="less">
.box {
  width: 100%;
  height: 100%;
  background-size: cover;
  z-index: 99;
  position: relative;
}

.logo {
  width: 100%;
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
}

.logo img {
  width: 64px;
  height: 64px;
}

.menu {
  box-sizing: border-box;
  height: calc(100% - 208px);
  width: 100%;
  box-sizing: border-box;
  padding-left: 28px;
  font-size: 12px !important;
}

.bottom {
  width: 100%;
  height: 100px;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
